<template>
	<view class="container page-container">
		<view class="e-list">
			<!-- 综合评价 -->
			<view class="e-item">
				<view class="display-flex alig space-between">
					<view class="display-flex alig">
						<text class="zh-title">综合评价</text>
						<view class="star">
							<image v-for="(item,i) in 5"
								:src="i<total.goodNum ? $img_path('/common/star_1.png') : $img_path('/common/star_2.png')"
								mode="widthFix"></image>
						</view>
					</view>
					<view class="zh-bfb">
						<text>{{ total.goodPercent * 100 }}%</text>
					</view>
				</view>
				<view class="tags">
					<view class="tag" :class="{'tag-active': queryFilter.image == 0 }" @click="imageChange(0)">
						<text>全部({{ total.totalNum }})</text>
					</view>
					<view class="tag" :class="{'tag-active': queryFilter.image == 1 }" @click="imageChange(1)">
						<text>有图({{ total.imageNum }})</text>
					</view>
				</view>
			</view>
			<!-- 评价列表 -->
			<view class="e-item" v-for="comment in commentList" :key="comment.id">
				<view class="top" v-if="comment.user">
					<view class="left">
						<!-- <image :src="$img_path('/mall/5.png')" mode="aspectFill"></image> -->
						<lazy-image :src="comment.user.avatar"></lazy-image>
					</view>
					<view class="user">
						<view class="display-flex alig">
							<view class="name">
								{{ comment.user.nickname }}
							</view>
							<view class="star">
								<image v-for="(item,i) in 5"
									:src="i<comment.score ? $img_path('/common/star_1.png') : $img_path('/common/star_2.png')"
									mode="widthFix"></image>
							</view>
						</view>
					<!-- 	<view class="service-member">
							<text>服务者：张师傅</text>
						</view> -->
					</view>
					<view class="time">
						{{ timestampToDate(comment.createtime * 1000)  }}
					</view>
				</view>
				<!-- 标签 -->
			<!-- 	<view class="item-tags">
					<view class="item-tag">
						<text>回头客好评</text>
					</view>
				</view> -->
				<!-- 内容 -->
				<view class="content-text">
					<text>{{ comment.content }}</text>
				</view>
				<!-- 大图 -->
				<view class="display-flex alig space-between" style="margin-top: 30rpx;" v-if="comment.images.length <= 2">
					<view class="max-image" v-for="(item, index) in comment.images" :key="index">
						<lazy-image :src="item"></lazy-image>
					</view>
				</view>
				<!-- 小图 -->
				<view class="display-flex alig flex-wrap" style="margin-top: 30rpx; gap: 20rpx;" v-else>
					<view class="min-image" v-for="(item, index) in comment.images" :key="index">
						<lazy-image :src="item"></lazy-image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getServiceGoodsCommentList, getServiceGoodsCommentTotal } from '@/utils/api/serviceApi'
	import { timestampToDate } from "@/utils/utils"
	export default {
		data() {
			return {
				tab_index: 1,
				goodsId: null,
				type: "goods",
				queryFilter: {
					page: 1,
					image: 0
				},
				queryEnd: false,
				commentList: [],
				total: {
					badNum: 0,
					goodNum: 0,
					goodPercent: "0.00",
					imageNum: 0,
					middleNum: 0,
					totalNum: 0,
				}
			};
		},
		onLoad(options) {
			const { goods_id, type = "goods" } = options
			this.goodsId = goods_id
			this.type = type
			this.init()
		},
		onReachBottom() {
			this.getServiceGoodsCommentList()
		},
		methods: {
			init() {
				this.getServiceGoodsCommentList()
				this.getServiceGoodsCommentTotal()
			},
			timestampToDate(time) {
				let date = timestampToDate(time)
				return date
			},
			imageChange(val) {
				this.queryFilter.image = val
				this.queryFilter.page = 1
				this.queryEnd = false
				this.getServiceGoodsCommentList()
			},
			
			async getServiceGoodsCommentList() {
				if (this.queryEnd) return
				try{
					const res = await getServiceGoodsCommentList({
						goods_id: this.goodsId,
						...this.queryFilter
					})
					console.log("评价列表", res)
					if (this.queryFilter.page == 1) {
						this.commentList = res.data
					} else {
						this.commentList = this.commentList.concat(res.data)
					}
					if (res.data.length > 0) {
						this.queryFilter.page += 1
					} else {
						this.queryEnd = true
					}
				}catch(e){
					//TODO handle the exception
				}
			},
			
			async getServiceGoodsCommentTotal() {
				try{
					const res = await getServiceGoodsCommentTotal({
						goods_id: this.goodsId,
						type: this.type
					})
					console.log("评价统计数据", res)
					this.total = res.data
				}catch(e){
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.e-list {
			.e-item {
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(223, 223, 223, 0.16);
				border-radius: 20rpx;
				padding: 16rpx 20rpx 40rpx;
				margin-bottom: 20rpx;

				.top {
					display: flex;
					align-items: flex-start;
					justify-content: space-between;

					.left {
						display: flex;
						align-items: center;

						&>image {
							width: 90rpx;
							height: 90rpx;
							border-radius: 50%;
						}
					}

					.time {
						font-weight: bold;
						font-size: 24rpx;
						color: #999999;
						line-height: 34rpx;
					}

					.user {
						margin-left: 20rpx;
						// display: flex;
						flex: 1;

						.name {
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
							margin-right: 14rpx;
						}

						.star {
							display: flex;
							margin-top: 8rpx;

							image {
								width: 26rpx;
								height: 26rpx;
								margin-right: 6rpx;
							}
						}

						.service-member {
							font-weight: 400;
							font-size: 26rpx;
							color: #333333;
							margin-top: 10rpx;
						}
					}
				}
			}
		}
	}

	.star {
		display: flex;
		margin-top: 8rpx;

		image {
			width: 26rpx;
			height: 26rpx;
			margin-right: 6rpx;
		}
	}

	.zh-title {
		font-weight: bold;
		font-size: 30rpx;
		color: #333333;
		margin-right: 14rpx;
	}

	.zh-bfb {
		font-weight: bold;
		font-size: 30rpx;
		color: #333333;
	}

	.tags {
		display: flex;
		flex-wrap: wrap;
		gap: 24rpx;
		margin-top: 24rpx;

		.tag {
			background: #F8F8F8;
			border-radius: 28rpx 28rpx 28rpx 28rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			padding: 8rpx 18rpx;
		}

		.tag-active {
			border: 2rpx solid #E72A2A;
			background: #FFF9F9;
			color: #E72A2A;
		}
	}

	.item-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		margin-top: 20rpx;

		.item-tag {
			padding: 4rpx 22rpx;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			border: 2rpx solid #E72A2A;
			font-weight: 400;
			font-size: 28rpx;
			color: #E72A2A;
		}
	}

	.content-text {
		font-weight: bold;
		font-size: 30rpx;
		color: #333333;
		margin-top: 24rpx;
	}
	
	.max-image {
		width: 336rpx;
		height: 336rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}
	
	.min-image {
		width: 222rpx;
		height: 222rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}
</style>